<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>移动端瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
            display: block;
            margin: 0;
        }

        .left-box {
            width: 50%;
            float: left;
        }

        .right-box {
            width: 50%;
            float: left;
        }
    </style>
</head>
<body>
<div class="left-box"></div>
<div class="right-box"></div>
<script>
    const imgArr = [
        'https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/92761043.JPG?w=1000&h=999&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/31e42833.jpg?w=750&h=750&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/dce45845.png?w=1080&h=1438&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/31a278eb.JPG?w=828&h=1104&x-oss-process=image/resize,w_1080',
        'https://image.watsons.com.cn//upload/76de81ab.jpg?w=750&h=974&x-oss-process=image/resize,w_1080'
    ]
    let leftImgArr = [];
    let height = new Array(2);
    height[0] = 0;
    height[1] = 0;
    let rightImgArr = [];
    let leftBox = document.querySelector('.left-box')
    let rightBox = document.querySelector('.right-box')

    //图片预加载
    function loadImg(imgArr, callback) {
        let count = 0;
        let img = []
        for (let i = 0; i < imgArr.length; i++) {
            let image = new Image()
            image.src = imgArr[i]
            image.onload = image.onerror = function (e) {
                if (e.type === "load") {
                    img[i] = e.path[0];
                }
                count++;
                if (count === imgArr.length) {
                    console.log(img)
                    callback(img)
                    for (let i = 0; i < leftImgArr.length; i++) {
                        leftBox.appendChild(leftImgArr[i])
                    }
                    for (let i = 0; i < rightImgArr.length; i++) {
                        rightBox.appendChild(rightImgArr[i])
                    }
                }
            }
        }
    }

    //左边右边图片
    loadImg(imgArr, function (img) {
        for (let i = 0; i < img.length; i++) {
            if (i === 0) {
                leftImgArr.push(img[i]);
                height[0] += img[i].height
            } else {
                if (height[0] > height[1]) {
                    rightImgArr.push(img[i]);
                    height[1] += img[i].height
                } else {
                    leftImgArr.push(img[i]);
                    height[0] += img[i].height
                }
            }
        }
    })
</script>
</body>
</html>
